<!--
 * @Author: your name
 * @Date: 2020-07-15 15:09:23
 * @LastEditTime: 2020-07-18 16:06:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \SY2020-6-14\src\views\negative\zhongdianrenyuanjiance\zhongdianrenyuanjiance.vue
--> 
<template>
  <div>
    <!-- 折叠面板组件 -->
    <Card>
      <div style="min-height: 730px">
        <Row>
          <Col span="3">
            <Row type="flex" align="middle">
              <Col span="1">
                <div class="nl-square"></div>
              </Col>
              <Col>重点人员监测</Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <div class="wire"></div>
        </Row>
        <div class="peopleCard">
          <Row>
            <Col span="6">
              <img src="../../../assets/IMG/people.png" height="150px" class="picturePeople" />
            </Col>
            <Col span="6">
              <Row style="margin-top: 7%">
                <Col span="4" style="margin-right:2%;">姓名</Col>
                <Col style="color:black">刘云凌</Col>
              </Row>
              <Row>
                <Col span="4" style="margin-right:2%">性別</Col>
                <Col style="color:rgb(166,166,166)">男</Col>
              </Row>
              <Row>
                <Col span="5" style="margin-right:4%">活跃度</Col>
                <Col style="color:rgb(166,166,166)">89</Col>
              </Row>
              <Row>
                <Col span="8" style="margin-right:2%">风险等级:</Col>
                <Col span="5" class="secondStylee">二级</Col>
              </Row>
              <Row>
                <Col span="8" style="margin-right:10px;color:#3431ec;margin-top:6%">详情....</Col>
              </Row>
            </Col>
          </Row>
          <div class="wire"></div>
          <Row class="peopleIntroduce">刘云凌简介:</Row>
          <Row type="flex" justift="center" style="margin:30px;40px;40px;40px;height:200px">
            刘云凌又叫刘银凌，因长期致力于黄金白银趋势分析与客户操作指导，所以一直被人们所称呼刘
            银灵教授。同时刘老师也是金融规律的探索者、金融定律的研究人、中国著名金融专家、中国金
            融市场诊断师、中国金融走向国际化道路的促进者。
            国内独一无二、最先进、最系统、最完善、最实用、最有效的管理体系、理论体系。 他曾破天荒
            般地发现了金融的客观规律，创立了科学的金融学。
          </Row>
          <div class="wire"></div>
          <Row class="account">刘云凌相关账号:</Row>
          <Row type="flex" style="margin-bottom:101px">
            <!-- <img
              :src="loginImg.QQ"
              height="150px"
              class="picture"F
            <!-- />-->
            <img src="../../../assets/IMG/main.png" height="100px" alt class="picture" />
            <img src="../../../assets/IMG/weibo.png" height="100px" alt class="picture" />
            <img src="../../../assets/IMG/wechat.png" height="100px" alt class="picture" />
            <img
              src="../../../assets/IMG/CSDN.png"
              height="100px"
              width="200px"
              alt
              class="picture"
            />
            <img src="../../../assets/IMG/add.png" height="100px" alt class="picture" />
            <!-- <img :src="loginImg.QQ" height="150px" class="picture" />
            <img :src="loginImg.QQ" height="150px" class="picture" key="max-logo" />-->
          </Row>
        </div>
      </div>
    </Card>
  </div>
</template>
<style scoped>
.wire {
  width: 100%;
  height: 1px;
  background: rgb(220, 220, 220);
}
.jianjie {
  height: 10%;
}
.peopleIntroduce {
  color: #3431ec;
  margin-top: 2%;
  margin-left: 2%;
}
.secondStylee {
  background-color: rgb(251, 158, 47);
  display: flex;
  justify-content: center;
  color: white;
}
/* 二级样式 */
.account {
  color: #3431ec;
  margin-top: 2%;
  margin-left: 2%;
}
.picturePeople {
  margin-top: 7%;
  margin-left: 7%;
  margin-bottom: 7%;
}
.peopleCard {
  width: 60%;
  margin: 30px;
  border-style: solid solid solid solid;
  border-width: 1px;
  border-color: rgb(220, 220, 220);
}
.picture {
  margin-top: 5%;
  margin-left: 1%;
}
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.nl_name {
  color: #ffffff;
}
.nl_name:nth-child(1) {
  margin-top: 0.5rem;
}
.send-news {
  margin-bottom: 10px;
}
.nl-user {
  background: white;
  box-shadow: 0 0 10px #dcdee2;
  height: 50px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* .ivu-menu-dark {
  background: #191952;
} */
.nl-left {
  background: #191952;
}
/* .ivu-menu-submenu:hover {
  background: #3b3994;
}
.ivu-menu-item{
  background: #0c0c35 !important;
}
.ivu-menu-item:hover{
  background: #0d0d3d !important;
}
/* 选中时的样式 */
/*.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
  background: #191952 !important;
}  */
.nl-page {
  margin-top: 10px;
}
.nl-logoname {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.nl-newsCuration-row {
  margin-bottom: 10px;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
/* table th样式 */
.ivu-table-header th {
  color: red !important;
}
</style>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
      nowData: [],
      accountPicture1: "",
      //表格数据
      data1: [],
      // 控制菜单打开关闭的属性
      visible: false,
      //分页
      pageSize: 10, //每页显示多少条数据
      dataCount: 0, //总条数
      pageCurrent: 1, //当前页
      //媒体类型多选框
      indeterminate: false, //半勾选状态如果为true
      checkAll: false, //选择所有属性
      checkAllGroup: [], //选择了哪一项
      //情感属性多选框
      eaIndeterminate: false,
      eaCheckAll: false,
      eaCheckAllGroup: [],
      //媒体类别选择器
      loginImg: {
        wechat: "",
        weibo: "",
        main: "",
        add: ""
        // CSDN: ""
      },
      mcModel: "",
      direModel: "",
      raModel: "",
      tsModel: "",
      rsModel: "",
      mlModel: "",
      riModel: "",
      mpModel: "",
      rotate: false //控制折叠面板图标旋转
    };
  },
  created() {
    // this.loginImg.CSDN = require("../../../assets/IMG/QQ.png");
    //直接用路径有可能加载不出来 用require请求不会出错
    // this.loginImg.wechat = require("../../../assets/IMG/wechat.png");
    // this.loginImg.weibo = require("../../../assets/IMG/weibo.png");
    // this.loginImg.main = require("../../../assets/IMG/main.png");
    // this.loginImg.add = require("../../../assets/IMG/add.png");
  },
  methods: {},
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  }
};
</script>

